<!doctype html>
<html>
<head>
    <script src="/blue/js/jquery.js"></script>
    <link href="/blue/css/css.css" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no" />

    <title>蓝色家政服务中心</title>
    <style>
        /*service服务*/
        .service_box{ height:48px; position:relative; margin-top:14px; padding-top:7px;box-sizing:border-box}
        .service{ width:92%; height:33px; line-height:33px; color:#191919; border:1px solid #d3d3d3; border-radius:3px; box-sizing:border-box; text-align:center; font-size:14px;margin:auto;}
        .add_service{ clear:both; line-height:37px; height:37px; width:20%; margin-left:40%; position:relative; text-align:center;}
        /*合计*/
        .total_box{ height:88px; box-sizing:border-box}
        .total_box h1{ font-size:12px; text-align:center; line-height:37px; color:#65646b;}
        .total_box p{ font-size:22px; color:#c40000; text-align:center; line-height:33px; margin-bottom:90px;}
        /*address地址*/
        .address{ padding-left:4%; position:relative; background-color:#fff; padding-top:9px; padding-bottom:9px; box-sizing:border-box}
        .address img{ float:left; margin-top:14px; width:18px; height:auto}
        .address_text{ float:left; margin-left:12px;}
        .address h1{ font-size:14px; line-height:21px; color:#191919;}
        .address h2{ font-size:14px; line-height:18px; color:#65646b;}
        .address h3{ font-size:14px; line-height:18px; color:#b2bab8;}
        /*选择房屋面积*/
        .area_box{ height:203px; background-color:#fff; position:relative; margin-top:14px;}
        .area_box h1{ padding-left:4%;color:#65646b; font-size:14px; line-height:46px;}
        .area{ width:20%; height:40px; line-height:40px; text-align:center; float:left; margin-left:4%; border:1px solid #ccc; box-sizing:border-box; border-radius:3px; color:#65646b; margin-top:20px;}
        .current{ border:1px solid #01aff0; color:#01aff0; background-image:url(/blue/images/checkbox.png);background-size: 12px 12px;background-repeat: no-repeat;background-position: right bottom; }
        /***********选择服务时间:弹出层**********/
        #option_time{ width:100%; height:100%; top:0; right:0; position:absolute; background:#fff;}
        .week_box{ height:62px; background-color:#fff; position:relative; margin-bottom:8px;}
        .week{ height:62px; width:14.3%; float:left}
        .week h1{ line-height:22px; font-size:14px; text-align:center; margin-top:11px;}
        .week h2{ line-height:19px; font-size:12px; color:#65646b; text-align:center;}
        .blue{ width:14.3%; position:absolute; left:0; bottom:0; height:2px; background-color:#01aff0;}
        .time_box{ margin-bottom:80px;}
        .time{ width:20%; float:left; margin-left:4%; margin-top:6px; border:1px solid #ccc; border-radius:3px; text-align:center; line-height:40px; height:40px; color:#b2bab8; box-sizing:border-box;}
        .option {
            border: 1px solid #01aff0;
            color:#191919;
            background-image:url(/blue/images/checkbox.png);
            background-size: 12px 12px;
            background-position: right bottom;
            background-repeat: no-repeat;
        }
        /*cart底部购物车*/
        .cart_box{ position:absolute; bottom:0; left:0; background-color:#f9f9f9; width:100%;}
        .cart_title{ padding-left:4%; line-height:33px; color:#191919; position:relative; background-color:#fff;}
        .cart_pro{ height:42px;}
        .cart_pro h1{ float:left; line-height:42px; margin-left:4%; color:#191919;}
        .cart_pro h2{ float:left; line-height:42px; margin-left:20%; color:#c40000; }
        .cart_pro img{ float:right; width:20px; height:auto; margin-top:11px;}
        .cart_pro p{ float:right; width:25px; height:20px; margin-top:11px; color:#191919; text-align:center}
        .cart{ height:47px; position:relative; margin-top:16px; background-color:#fff;}
        .cart img{ width:46px; height:46px; position:absolute; left:4%; bottom:17px;}
        .sure{ float:right; width:25%; height:47px; background-color:#999; color:white; line-height:47px; text-align:center; font-size:18px;}
        .cart p{ color:#c40000; font-size:18px; line-height:47px; float:right; margin-right:6px;}
        .cart h1{ color:#191919; font-size:14px; line-height:47px; float:right}
        .number{ position:absolute; left:4%; top:-15px; margin-left:34px; height:18px; width:18px; background-color:#c40000; border-radius:50%; line-height:18px; text-align:center; color:white; font-size:12px;}
    </style>
</head>

<body style="background-color: #f9f9f9;">

<!--header顶部标题-->
<div class="header" ><span id="ric">日常保洁</span>
    <div class="header_left" onclick="window.history.go(-1)"><img src="/blue/images/return.png"></div>
    <div class="header_right" id="open_sta" onClick="statement()">免责声明</div>
</div>
@if($cha == '')
    <!--column服务地址-->
    <div class="column_box" onclick="document.location='address?ii=ri';">
        <div class="border_top"></div>
        <div class="column_img"><img src="/blue/images/adrress.png"></div>
        <p>请选择服务地址</p>
        <h3><span id="ping"></span><span id="xiao"></span></h3>
        <div class="next"><img src="/blue/images/arrow.png"></div>
        <div class="border_bottom"></div>
    </div>
@else
    <!--选取地址后的服务地址，先隐藏，选取地址后显示-->

    <div class="address"  onclick="document.location='address?ii=ri';">
        <div class="border_top"></div>
        <img src="/blue/images/adrress.png">
        <div class="address_text">

            <span id="dizhi"><h1>{{$kan->city}}  {{$cha->community}}</h1></span>
            <h2><span id="diz">{{$cha->address}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="lxr">{{$cha->contact}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="dianhua">{{$cha->tel}}</span></h2>
            <h3><span id="ping">未选择多少平米</span>，<span id="xiao">两个小时</span>，{{$kan->money}}元/小时/人</h3>
        </div>
        <div class="clearfix"></div>
        <div class="border_bottom"></div>
    </div>

    <!--选择房屋面积-->
    <div class="area_box">
        <div class="column_box" >
            <div class="border_top"></div>
            <div class="column_img"><img src="/blue/images/area.fw.png"></div>
            <p>请选择房屋面积（㎡）</p>

        </div>
        <div style=" width:92%; border-top:1px #cccccc solid; margin:auto;"></div>

        <div class="area " id="one">1-100<span style="display: none">50.5</span></div>
        <div class="area" id="two">101-130 <span style="display: none">115</span></div>
        <div class="area" id="three">130-160<span style="display: none">145</span></div>
        <div class="area" id="four">160-200<span style="display: none">180</span></div>
        <div class="area" id="five">200-260<span style="display: none">230</span></div>
        <div class="area" id="six">260-380<span style="display: none">320</span></div>
        <div class="area" id="seven">380-500<span style="display: none">440</span></div>
        <div class="area" id="eight">500-720<span style="display: none">610</span></div>
        <div class="border_bottom"></div>

        <h3 style=" position:absolute;right:4%; bottom:10px; color:#C0C3C3"><span id="xiaoshi">{{$kan->money}}</span>元/小时，1元/平方</h3>
    </div>
@endif
<!--column服务时间-->
<div class="column_box column_ron" style="margin-top:14px;">
    <div class="border_top"></div>
    <div class="column_img"><img src="/blue/images/time.png"></div>
    <p id="atext">请选择服务时间</p><span id="btext" style="margin-left:10px; color:#65646b"></span>
    <div class="next"><img src="/blue/images/arrow.png"></div>
    <div class="border_bottom"></div>
</div>
<!--service_box服务-->
<div class="service_box">
    <div class="service checkbox" style=" border:1px solid #01AFF0; background:#fff;">基础服务
    </div>
</div>
<!--合计-->
<div class="total_box">

    <h1>合计：<span></span></h1>
    <p>￥<scan style="font-size:19px;"  id="heji"></scan></p>
</div>
<!--confirm提交订单-->
<div class="confirm_box">
    <div class="confirm" id="tj">提交订单</div>
</div>
<!--免责声明-->
<div class="black" id="black"></div>
<div class="statement" id="statement">
    <div class="statement_header">免责声明
        <div class="border_bottom"></div>
    </div>
    <img class="close" onClick="close_sta()" src="/blue/images/close.png">
    <div class="statement_text">
        <h1>1.什么是优惠券？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
        <h1>2.优惠券如何使用？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
        <h1>3.如何获得优惠券？</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
        <h1>4.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
        <h1>5.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="statement_text">
        <h1>6.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
</div>
<!--服务标准-->
<div class="standard">
    <div class="standard_header">服务标准
        <div class="border_bottom"></div>
    </div>
    <img class="close" onClick="close_sta()" src="/blue/images/close.png">
    <div class="standard_text">
        <h1>窗户</h1>
        <p>窗户玻璃无污尘，窗槽干净，无污痕</p>
    </div>
    <div class="standard_text">
        <h1>客厅及茶几</h1>
        <p>沙发靠垫、靠枕摆放整齐，底部清扫干净，无毛发、无杂物，茶几内茶具摆放整齐，茶水桶倾倒干净，烟灰缸倾倒、刷洗干净后，垫纸、滴水沾湿</p>
    </div>
    <div class="standard_text">
        <h1>地面</h1>
        <p>地面干净、无水痕、无污痕。玩具、鞋子、凳子等物品要挪起清洁后整齐归位</p>
    </div>
    <div class="standard_text">
        <h1>鞋柜</h1>
        <p>鞋子统一朝向摆放整齐</p>
    </div>
    <div class="standard_text">
        <h1>5.什么是优惠券</h1>
        <p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
    </div>
    <div class="standard_text">
        <h1>垃圾桶</h1>
        <p>垃圾桶倾倒后，刷洗干净，套上干净的塑料袋</p>
    </div>
</div>
<!-------------请选择服务时间：弹出层------------->
<div id="option_time">
    <!--header顶部标题-->
    <div class="header">请选择上门时间 </div>
    <div class="week_box">
        @foreach ($date as $ks=>$vs)
            <div class="week"  style="width:14.2%;">
                <h1>{{ $ks }}</h1>
                @if(!empty($time[$ks]))
                    <h2>可约</h2>
                @else
                    <h2>约满</h2>
                @endif
            </div>
        @endforeach
        <div class="blue"></div>
        <div class="border_bottom"></div>
    </div>
    <?php $a=1;?>
    @foreach($tsj as $k)
        @if($a==1)
           <div class="time_box"  id="option_box<?php echo $a?>">
        @else
           <div class="time_box" style="display: none"  id="option_box<?php echo $a?>">
        @endif
            @foreach($k as $aa => $as)
                @if( $as == 1)
                    <div class="time " style="pointer-events:none;" >{{ $aa }}这个时间被约了</div>
                @elseif( $as == 0)
                         <div class="time" >{{ $aa }}</div>
                @endif
            @endforeach
        </div>
            <?php $a++;?>
    @endforeach

    <!--confirm提交订单时间-->
    <div class="confirm_box" >
        <div class="confirm"  style=" background-color:#FF7F00">确定</div>
    </div>
</div>
<script>
    //选择房屋面积
    $(".area").click(function(){$(this).addClass("current").siblings().removeClass("current");})
    //隐藏免责声明、服务标准
    document.getElementById('black').style.display="none";
    document.getElementById('statement').style.display="none";
    //点击免责声明按钮，显示免责声明
    function statement(){
        document.getElementById('black').style.display="block";
        document.getElementById('statement').style.display="block";
    }
    //点击关闭按钮，关闭免责声明
    function close_sta(){
        document.getElementById('black').style.display="none";
        document.getElementById('statement').style.display="none";
        $(".standard").hide();
    }
    $(".service").click(
        function(){
            $(this).toggleClass("checkbox");
        }
    )
    //隐藏服务地址
    $(".standard").hide();
    //点击基础服务
    $(".service").eq(0).click(
        function(){
            document.getElementById('black').style.display="block";
            $(".standard").show();
        }
    )

    //选择时间弹出层
        <?php $aaa=[]; $bbb=[];
            foreach($date as $k=>$v){           //将日期取出来
                $aaa[]=$k;                       //将日期赋值给$aaa数组
                foreach ($v as $ks=>$vs){       //将时间段取出来
                   $bbb[] = $ks;                  //将时间段接收
                }
            }

        ?>

    var  ajson = '{!! json_encode($aaa) !!}';           //将数组里面的值变成json数据赋值给ajson变量
    var ar = JSON.parse(ajson);                         //将json里面的数据解析赋值给ar
    var articlesJsons = '{!! json_encode($bbb) !!}';    //跟上面两个的操作一样
    var arr = JSON.parse(articlesJsons);
    var atext=document.getElementById("atext");
    var btext=document.getElementById("btext");
    var        week=document.getElementsByClassName("week");
    var        time=document.getElementsByClassName("time")
    //隐藏选择时间
    var off=1;
    $("#option_time").hide();
    $(".column_ron").click(
        function(){$("#option_time").show();
            if(off){ atext.innerHTML='{{$aaa[0]}}';btext.innerHTML='请选择时间';off=0;}
        })
    //显示选择时间
    $(".confirm").click(function(){$("#option_time").hide()})//隐藏选择时间
    $(".header_left").click(function(){$("#option_time").hide()})
    //选择几号:点击日期，边框滑动
   <?php
        $bai=0;  $baifen=0;     $riqi=0;    //判断有几天
            foreach ($date as $k=>$v){
                $baifen++;?>
                var wk=$('.week:eq({{$riqi}})').find('h2').text();
                if(wk=='约满'){
                    wk=$('.time_box:eq({{$riqi}})').html("<center><h1>'不要看了这一天已经约满了'</h1><h2>'抱歉这一天已经约满了请你赶紧约下一天吧不然下一天也要被约满了'</h2><h1>'小崽子看什么看还不赶快约下一天'<h1><center");
                }
                $(".week:eq({{$riqi}})").click(function(){$(".blue").animate({left:"{{$bai}}%"});hides();$("#option_box{{$baifen}}").show();})
            <?php $riqi++;$bai=($bai+14.3); }?>
            for(i=0;i<week.length;i++){
                week[i].index=i;
                week[i].onclick=function(){
                    atext.innerHTML="<p>"+ar[this.index]+"</p>";
                }
            }


    function hides(){
        <?php $a=1;?>
        @foreach($date as $k=>$s)
            $('#option_box{{$a}}').hide();
        <?php $a++;?>
        @endforeach
    }

    //选择具体时间
    <?php $kek=1;?>
    @foreach($date as $k)
        var option_box=document.getElementById("option_box{{$kek}}");
        var time{{$kek}}=option_box.getElementsByTagName("div");
        $(time{{$kek}}).click(function(){$(this).addClass("option").siblings().removeClass("option");})
        for(x=0;x<time{{$kek}}.length;x++){
            time{{$kek}}[x].index=x;
            time{{$kek}}[x].onclick=function(){
                btext.innerHTML="<span>"+arr[this.index]+"</span>";
            }
        }
            <?php $kek++;?>
    @endforeach





    $('#one').click(function () {
        var obj = $("#one").clone();
        obj.find(':nth-child(n)').remove();
        var  a=$('#one').find('span').text();
        var q=$('#xiaoshi').text();
        b=q*4+parseFloat(a);
        $('#heji').html(b);
        $('#ping').html(obj.html());
    });
    $('#two').click(function () {
        var obj = $("#two").clone();
        obj.find(':nth-child(n)').remove();
        var  a=$('#two').find('span').text();
        var q=$('#xiaoshi').text();
        b=q*4+parseFloat(a);
        $('#heji').html(b);
        $('#ping').html(obj.html());
    });
    $('#three').click(function () {
        var obj = $("#three").clone();
        obj.find(':nth-child(n)').remove();
        var  a=$('#three').find('span').text();
        var q=$('#xiaoshi').text();
        b=q*4+parseFloat(a)
        $('#heji').html(b);
        $('#ping').html(obj.html());
    });
    $('#four').click(function () {
        var obj = $("#four").clone();
        obj.find(':nth-child(n)').remove();
        var  a=$('#four').find('span').text();
        var q=$('#xiaoshi').text();
        b=q*4+parseFloat(a)
        $('#heji').html(b);
        $('#ping').html(obj.html());
    });
    $('#five').click(function () {
        var obj = $("#five").clone();
        obj.find(':nth-child(n)').remove();
        var  a=$('#five').find('span').text();
        var q=$('#xiaoshi').text();
        b=q*4+parseFloat(a)
        $('#heji').html(b);
        $('#ping').html(obj.html());
    });
    $('#six').click(function () {
        var obj = $("#six").clone();
        obj.find(':nth-child(n)').remove();
        var  a=$('#six').find('span').text();
        var q=$('#xiaoshi').text();
        b=q*4+parseFloat(a)
        $('#heji').html(b);
        $('#ping').html(obj.html());
    });
    $('#seven').click(function () {
        var obj = $("#seven").clone();
        obj.find(':nth-child(n)').remove();
        var  a=$('#seven').find('span').text();
        var q=$('#xiaoshi').text();
        b=q*4+parseFloat(a)
        $('#heji').html(b);
        $('#ping').html(obj.html());
    });
    $('#eight').click(function () {
        var obj = $("#eight").clone();
        obj.find(':nth-child(n)').remove();
        var  a=$('#eight').find('span').text();
        var q=$('#xiaoshi').text();
        b=q*4+parseFloat(a)
        $('#heji').html(b);
        $('#ping').html(obj.html());
    });

    $("#tj").click(function () {
        var pf = $("#ping").text();
        var xs = $("#btext").text();
        var as = $("#atext").text();
        var hj = $("#heji").text();
        var ric = $("#ric").text();
        var atext = $("#atext").text();
        var lxr = $("#lxr").text();
        var dianhua = $("#dianhua").text();
        var dizhi = $("#dizhi").text();
        var diz = $("#diz").text();
        if(pf == '未选择多少平米' ){
            alert('请选择多少平米');
        }else if(pf == ''){
            alert('请选择你的服务地址');
        }else if(xs == '' || xs == '请选择时间' || atext == '请选择日期'){
            alert('你还没选择时间');
        }else if(pf != '未选择多少平米' || pf != '' || xs != '' || xs != '请选择时间'){
            var ding=[
                area = pf,                       //面积
                publishedtime = as+'  '+xs,      //详细时间
                money = hj,                      //需要付的金额
                content = ric,                   //订单类型
                contact = lxr,                   //联系人
                tle =dianhua,                    //联系方式
                address_pid = dizhi+'  '+diz,    //用户的详细地址
                rq = as,
                xis = xs
            ];

            $.post('myorder',{ding},function (res) {
                @if(!session('name')){
                    alert('你的登录过期了请重新登录');
                }@else{
                    if (res == 11) {
                        alert('预约成功请付款');
                        location.href = 'myorder';
                    }
                    else if(res == 12)
                    {
                        alert('你设备不行 返回的速度太慢 已被人抢先预约 刷新查看 还可以预约的时间');
                    }
                    else if(res == 13)
                    {
                        alert('你的运气绝了有人比你快');
                    }
                    else
                    {
                        alert('预约失败请先登录谢谢');
                    }
                }
                @endif;
            })
        }
    });
</script>
</body>
</html>
